<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,aItemress=no">
	<title>弹出属性选择页面</title>
	<link rel="stylesheet" type="text/css" href="../css/aui.css" />
	<link rel="stylesheet" type="text/css" href="../css/app.css" />
</head>
<style>
	body,
	html {
		background-color: rgba(0, 0, 0, 0);
	}

	.attr-tag {
		display: inline-block;
	    padding:0 0.65rem;
		height: 1.4rem;
		line-height: 1.4rem;
		text-align: center;
		border-radius: 0.2rem;

		background:rgba(240,241,242,0.4);
		font-size: 0.7rem;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		color: #2E2E2E;
		margin-right: 0.5rem;
	}

	.attr-tag.active {
		color: #005A93;
		border:0.025rem solid rgba(0,90,147,1);
		background:rgba(227,244,255,1);
	}

	.aui-btn-plus {
		/*border: 1px solid #999999;*/
		border: 1px solid rgba(225, 225, 229, 1);
		/*border-radius: 50%;*/
		/*border-radius:2px;*/
		width: 1.6rem;
		height: 1.6rem;
		line-height: 1.6rem;
		color: #999999;
	}
	


	.add_decrease_count {
		width: 3.85rem;
		height: 1.1rem;
		border-radius: 0.07rem;	
		display: flex;
		justify-content: space-between;
	
	}

	.add_decrease_count>div {
		width: 1.15rem;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.add_decrease_count>div img {
		width: 0.4rem;
		height: 0.4rem;
	}
	/*改写*/

	.sel_sku_wraper {
		background: #ffffff;
		padding: 1rem 0.75rem;
		width: 100%;
		position: fixed;
		bottom: 0;
		z-index: 999;
	}

	.main_detail_news {
		display: flex;
	}

	.price_delete_btn {}

	.btn_certain {
		width: 17.25rem;
		height: 2.3rem;
		border-radius: 0.3rem;
		font-size: 0.8rem;
		font-family: PingFangSC;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		text-align: center;
		line-height: 2.3rem;
		border-radius:0.3rem !important;
		display: inline-block;
	}
	.btnSure{
		text-align: center;margin-top:1.5rem;width:100%;float: left;
	}
	.aui-btn{ transition: all 0.1s ease-out;}
	.aui-btn:active {
	color: #fff;
	background:rgba(0,90,147,0.8);
}
</style>

<body>
	<div class="" id="app" v-cloak="">
		<div class="aui-mask aui-mask-in" style="z-index: 991;" tapmode onclick="close_frame()"></div>
		<div class="sel_sku_wraper" style="">
			<!-- 商品主要信息 -->
			<div class="main_detail_news">
				<div class="left" style="margin-right:0.75rem;width:4rem;height:4rem;">
					<img class="" :src="goodsinfo.cover" style="width:4rem;height:4rem;border-radius:0.2rem;" />
				</div>

				<div class="right" style="">
					<!-- 价钱 和删除按钮 -->
					<div class="price_delete_btn" style="">
						<div class="" style="font-size:0.75rem;font-family:PingFangSC-Semibold;font-weight:600;color:#E90000;height:1.4rem;line-height:1.4rem;margin-top:0.1rem">
							<span style="display:inline-block;">￥<span style="font-size:1.1rem;;font-family:Akrobat-Bold;">{{price}}</span> </span>
							<img tapmode @click="close_frame()" style="width:1.1rem;height:1.1rem;position:absolute;top:1rem;right:0.75rem;z-index:1000" src="../image/btn/btn-close-wind.png" />
						</div>
					</div>
					<!-- 库存 -->
					<div class="" style="font-size:0.6rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(150,150,153,1);line-height:0.85rem;margin-bottom:0.9rem;">
						库存：{{kucun}}件
					</div>
					<!-- 已选择 -->
					<div class="" style="font-size:0.6rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(150,150,153,1);line-height:0.85rem;">
						已选择：<span v-for="vo in good_sku_view">{{vo}}</span>
					</div>

				</div>
			</div>

			<!-- 商品款式选择 -->
			<div class="" style="margin-top:1.25rem;">
				<div v-for="(vo,index) in goodSku.good_attr" class="" style="margin-bottom:1rem;">
					<div class="" style="font-size:0.7rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(51,51,51,1);line-height:1rem;margin-bottom:0.5rem;">
						{{vo.name}}
					</div>
					<div class="">
						<span v-for="item in vo.sub" class="attr-tag" :class="{'active':item==good_sku_view[index]}" tapmode @click="$set(good_sku_view,index,item)">{{item}}</span>
					</div>
				</div>
			</div>
			<div class="buy" style="width:100%">
				<div class="" style="font-size:.7rem;font-family:PingFangSC-Regular;font-weight:400; float: left;width:40%">
					购买数量
				</div>

				<!-- 点击增加或减少数量 -->
				<div class="add_decrease_count" style="float: right;">
					<div class="" tapmode @click="if(count<2)return;count-=1;" >
						<img src="../image/icon/icon-cut-none.png" alt="" v-if="count <= 1" style="width:0.6rem;height:0.6rem;">
						<img src="../image/icon/icon-cut.png" alt="" v-else style="width:0.6rem;height:0.6rem;">
					</div>
					<div style="width:2.1rem;height:100%;font-size:0.6rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(50,50,51,1);text-align:center;line-height:1.1rem;background:#F0F1F2;"> {{count}}</div>
					<div tapmode @click="if(count>=kucun){count=kucun;return;};count+=1" class="" >
						<img src="../image/icon/icon-plus-none.png" alt="" v-if="count == kucun" style="width:0.6rem;height:0.6rem;">
						<img src="../image/icon/icon-plus.png" alt="" v-else style="width:0.6rem;height:0.6rem;">
					</div>
				</div>
			</div>
			<div class="clearfix"></div>
             <div class="btnSure">
				<div tapmode onclick="sel_sku()" class="aui-btn ming-text-white btn_certain" :class="{'aui-bg-linear':kucun>0}" :class="{'morekucun':kucun<0}" style="">
					确定
				</div>
			 </div>
			

		</div>

	</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/vue.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script>
	var vm = new Vue({
		el: "#app",
		data: {
			goodsinfo: {},
			goodSku: {
				good_attr: [],
				good_sku: []
			},
			count: 1,
			type: 'good',
			good_sku_view: [],
			goodSku_goods:{}
		},
		methods: {
			get_list: function() {
				get_data('api/Good/goodSku', {
					good_id: vm.goodsinfo.good_id
				}, function(ret) {
					if (ret.status) {
						vm.good_sku_view = vm.goodsinfo.good_sku.split('|')
						vm.goodSku = ret.data
					}
				})
			},
			price_format: function(type, price) {
				var price = price / 100;
				var status = (price + '').indexOf('.')
				if (status == '-1') {
					if (type == 'yuan') {
						return price;
					}
					if (type == 'fen') {
						return '00';
					}
				}
				var price_array = (price + '').split('.')
				if (type == 'yuan') {
					return price_array[0];
				}
				if (type == 'fen') {
					var price_fen = price_array[1].length < 2 ? price_array[1] + '0' : price_array[1];
					return price_fen;
				}
			}
		},
		computed: {
			kucun: function() {
				var kucun = false;
				if (this.good_sku_view.length == 0) {
					return this.goodsinfo.stock_num;
				}
				if (this.good_sku_view.length != this.goodSku.good_attr.length) {
					vm.count = 0
					return '0';
				}
				var name = this.good_sku_view.join('|');
				this.goodSku.good_sku.forEach(function(el) {
					if (name === el.good_sku) {
						if (el.stock_num) {
							kucun = el.stock_num;
							vm.count = 1
						} else {
							kucun = '0'
							vm.count = 0
						}
					}
				})
				if (!kucun) {
					kucun = '0';
					vm.count = 0
				}
				return kucun;
			},

			price: function() {
				var price = this.goodsinfo.current_price / 100 * this.count;
				var name = this.good_sku_view.join('|');
				this.goodSku.good_sku.forEach(function(el) {
					if(name === el.good_sku) {
						if(el.stock_num) {
							if (vm.type == 'miao') {
								price = el.miao_price;
							} else {
								price = el.price;
							}

						} else {
						}
					}
				})
				return price.toFixed(2);
			}
		}
	})
	apiready = function() {
		// vm.goodsinfo = $api.getStorage('goodsinfo')
		vm.goodsinfo = api.pageParam.goodsinfo
		vm.type = vm.goodsinfo.type
		vm.goodSku_goods = $api.getStorage('goodSku_goods')
		vm.count = vm.goodsinfo.good_num
		vm.get_list()
	};

	function sel_sku() {
		if (vm.count == '0') {
			return;
		}
		get_data('api/GoodCart/editGoodCart', {
			token: $api.getStorage('token'),
			good_cart_id: vm.goodsinfo.id,
			good_num: vm.count,
			good_sku: vm.good_sku_view.join('|')
		}, function(ret) {
			if (ret.status) {
				send_event('cart_ref')
				close_frame()
			}
		})
	}
</script>

</html>
